<template>
  <div class="account-management">
    <!-- 左侧树形结构区域 -->
    <div class="left-tree-panel">
      <div class="tree-header">
        <h4>
          <i class="el-icon-office-building"></i>
          楼栋用房分类
        </h4>
      </div>
      <div class="tree-search">
        <el-input 
          v-model="treeSearchText" 
          placeholder="请输入楼栋内容" 
          size="small" 
          clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="tree-container">
        <el-tree
          :data="treeData"
          :props="treeProps"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="true"
          :highlight-current="true"
          @node-click="handleNodeClick"
          class="custom-tree">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="tree-node-label">
              <i :class="getNodeIcon(data)" class="tree-node-icon"></i>
              {{ node.label }}
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="right-content-panel">
      <!-- 操作栏 -->
      <div class="operation-bar">
        <div class="operation-left">
          <el-button type="primary" size="small" @click="addTenant" icon="el-icon-plus">
            新增
          </el-button>
          <span class="selected-info" v-if="selectedNode">
            当前选择: {{ selectedNode.label }}
          </span>
        </div>
        <div class="operation-right">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入用户名或房间号"
            size="small"
            clearable
            style="width: 200px; margin-right: 10px;"
            @keyup.enter.native="handleSearch">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
          <el-button size="small" @click="resetSearch">重置</el-button>
        </div>
      </div>

      <!-- Tab切换 -->
      <div class="tab-container">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="custom-tabs">
          <el-tab-pane label="租户信息" name="tenant-info">
            <template slot="label">
              <span class="tab-label">
                <i class="el-icon-document"></i>
                租户信息
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane label="租户管理" name="tenant-management">
            <template slot="label">
              <span class="tab-label">
                <i class="el-icon-setting"></i>
                租户管理
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 租户信息表格 -->
      <div class="table-container" v-if="activeTab === 'tenant-info'">
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-tickets"></i>
            租户信息列表
          </div>
          <div class="table-info">
            共 {{ total }} 条，每页 {{ pageSize }} 条
          </div>
        </div>
        <el-table 
          :data="tableData" 
          border 
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          :row-style="rowStyle"
          class="custom-table"
          v-loading="loading"
          element-loading-text="加载中..."
        >
          <el-table-column prop="username" label="用户名" width="120" align="center">
            <template slot-scope="scope">
              <div class="user-info">
                <i class="el-icon-user"></i>
                {{ scope.row.username }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="roomNumber" label="房间号" width="120" align="center">
            <template slot-scope="scope">
              <el-tag size="small" type="info">{{ scope.row.roomNumber }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="contactPhone" label="联系电话" width="150" align="center"></el-table-column>
          <el-table-column prop="queryPassword" label="查询密码" width="120" align="center">
            <template slot-scope="scope">
              <span class="password-mask">{{ scope.row.queryPassword }}</span>
              <i class="el-icon-view password-icon" @click="togglePassword(scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column prop="contactAddress" label="联系地址" width="120" align="center"></el-table-column>
          <el-table-column prop="mergeBilling" label="合并计费" width="120" align="center">
            <template slot-scope="scope">
              <el-tag 
                size="small" 
                :type="scope.row.mergeBilling === '是' ? 'success' : 'warning'"
              >
                {{ scope.row.mergeBilling }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="创建人" width="120" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center"></el-table-column>
          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template slot-scope="scope">
              <div class="action-buttons">
                <el-button 
                  type="primary" 
                  size="mini" 
                  icon="el-icon-edit"
                  @click="editTenant(scope.row)"
                >
                  修改
                </el-button>
                <el-button 
                  type="danger" 
                  size="mini" 
                  icon="el-icon-delete"
                  @click="deleteTenant(scope.row)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="mt-4"
        >
        </el-pagination>
      </div>

      <!-- 租户管理表格 -->
      <div class="table-container" v-if="activeTab === 'tenant-management'">
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-setting"></i>
            租户管理列表
          </div>
          <div class="table-info">
            共 {{ total }} 条，每页 {{ pageSize }} 条
          </div>
        </div>
        <el-table 
          :data="managementData" 
          border 
          style="width: 100%; min-width: 1400px;"
          :header-cell-style="headerCellStyle"
          :row-style="rowStyle"
          class="custom-table"
          v-loading="loading"
          element-loading-text="加载中..."
        >
          <el-table-column prop="roomNumber" label="房间号" width="100" align="center">
            <template slot-scope="scope">
              <el-tag size="small" type="info">{{ scope.row.roomNumber }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="100" align="center"></el-table-column>
          <el-table-column prop="paymentMethod" label="付费模式" width="120" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.paymentMethod" size="mini" placeholder="请选择">
                <el-option label="预付费" value="prepaid"></el-option>
                <el-option label="后付费" value="postpaid"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="electricPlan" label="电价方案" width="120" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.electricPlan" size="mini" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option label="方案一" value="plan1"></el-option>
                <el-option label="方案二" value="plan2"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="timePlan" label="定时方案" width="120" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.timePlan" size="mini" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option label="方案一" value="time1"></el-option>
                <el-option label="方案二" value="time2"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="waterPlan" label="水价方案" width="120" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.waterPlan" size="mini" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option label="方案一" value="water1"></el-option>
                <el-option label="方案二" value="water2"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="subsidyPlan" label="补助方案" width="120" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.subsidyPlan" size="mini" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option label="方案一" value="subsidy1"></el-option>
                <el-option label="方案二" value="subsidy2"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="depositAmount" label="催缴金额" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.depositAmount" size="mini" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="feeAmount" label="费控金额" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.feeAmount" size="mini" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="publicAmount" label="公摊费用" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.publicAmount" size="mini" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template slot-scope="scope">
              <div class="action-buttons">
                <el-button 
                  type="primary" 
                  size="mini" 
                  icon="el-icon-edit"
                  @click="editManagement(scope.row)"
                >
                  修改
                </el-button>
                <el-button 
                  type="danger" 
                  size="mini" 
                  icon="el-icon-delete"
                  @click="deleteManagement(scope.row)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="mt-4"
        >
        </el-pagination>
      </div>

    </div>

    <!-- 新增/编辑租户弹窗 -->
    <el-dialog 
      title="用户开户" 
      :visible.sync="showAddDialog" 
      width="900px"
      @close="resetForm"
      class="custom-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <div class="dialog-header">
          <h3>
            <i class="el-icon-user-solid"></i>
            用户开户
          </h3>
        </div>
        <el-form 
          :model="form" 
          :rules="rules" 
          ref="form" 
          label-width="120px"
          class="custom-form"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="用户名:" prop="username">
                <el-input 
                  v-model="form.username" 
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-user"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="查询密码:" prop="queryPassword">
                <el-input 
                  v-model="form.queryPassword" 
                  placeholder="请输入查询密码"
                  prefix-icon="el-icon-lock"
                  show-password
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="联系电话:" prop="contactPhone">
                <el-input 
                  v-model="form.contactPhone" 
                  placeholder="请输入联系电话"
                  prefix-icon="el-icon-phone"
                  clearable
                >
                  <el-button 
                    slot="append" 
                    type="primary" 
                    size="small"
                    @click="savePhone"
                  >
                    保存
                  </el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系地址:" prop="contactAddress">
                <el-input 
                  v-model="form.contactAddress" 
                  placeholder="请输入联系地址"
                  prefix-icon="el-icon-location"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="合并计费:">
                <el-radio-group v-model="form.mergeBilling" class="custom-radio-group">
                  <el-radio label="是" class="custom-radio">是</el-radio>
                  <el-radio label="否" class="custom-radio">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item>
                <el-button 
                  type="primary" 
                  icon="el-icon-location-outline"
                  @click="selectArea"
                  class="select-area-btn"
                >
                  选择区域
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 区域选择表格 -->
        <div class="area-table-container">
          <div class="area-table-header">
            <h4>
              <i class="el-icon-location"></i>
              已选择区域
            </h4>
          </div>
          <el-table 
            :data="areaData" 
            border 
            stripe
            style="width: 100%"
            class="area-table"
            size="small"
          >
            <el-table-column prop="roomNumber" label="房间号" width="150" align="center"></el-table-column>
            <el-table-column prop="billingMethod" label="累计倍率/水表倍率 (V)" width="200" align="center"></el-table-column>
            <el-table-column prop="electricWaterRatio" label="电倍/水倍数" width="150" align="center"></el-table-column>
            <el-table-column prop="meterType" label="仪表类型" width="120" align="center"></el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button 
                  type="danger" 
                  size="mini" 
                  icon="el-icon-delete"
                  @click="removeArea(scope.$index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm" :loading="saving">{{ saving ? '保存中...' : '保存' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AccountManagement',
  data() {
    return {
      // 树形结构相关
      treeSearchText: '',
      treeData: [],
      selectedNode: null,
      treeProps: {
        children: 'children',
        label: 'label'
      },
      // 表格和分页相关
      tableData: [],
      managementData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      // 搜索表单
      searchForm: {
        keyword: ''
      },
      // Tab切换
      activeTab: 'tenant-info',
      // 弹窗相关
      showAddDialog: false,
      dialogTitle: '新增租户',
      saving: false,
      form: {
        id: null,
        username: '',
        queryPassword: '',
        contactPhone: '',
        contactAddress: '',
        remark: '',
        mergeBilling: '否',
        area: []
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        queryPassword: [
          { required: true, message: '请输入查询密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        contactAddress: [
          { required: true, message: '请输入联系地址', trigger: 'blur' }
        ]
      },
      // 区域选择
      showAreaTable: false,
      areaData: [
        {
          roomNumber: '101',
          billingMethod: '1.0',
          electricWaterRatio: '1.0',
          meterType: '电表'
        },
        {
          roomNumber: '102', 
          billingMethod: '1.0',
          electricWaterRatio: '1.0',
          meterType: '水表'
        }
      ]
    }
  },
  watch: {
    treeSearchText(val) {
      this.$refs.tree.filter(val)
    },
    activeTab() {
      this.currentPage = 1
      this.loadTableData()
    }
  },
  created() {
    this.loadTreeData()
    this.loadTableData()
  },
  methods: {
    // 加载树形结构数据 - 使用mock数据
    loadTreeData() {
      this.treeData = [
        {
          id: 1,
          label: '楼栋用房分类',
          children: [
            {
              id: 2,
              label: '宿舍',
              children: [
                {
                  id: 3,
                  label: 'A栋',
                  children: [
                    { id: 4, label: '101', type: 'room' },
                    { id: 5, label: '102', type: 'room' },
                    { id: 6, label: '103', type: 'room' },
                    { id: 7, label: '104', type: 'room' }
                  ]
                }
              ]
            },
            {
              id: 8,
              label: '二层',
              children: [
                {
                  id: 9,
                  label: 'B栋',
                  children: [
                    { id: 10, label: '201', type: 'room' },
                    { id: 11, label: '202', type: 'room' },
                    { id: 12, label: '203', type: 'room' }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    
    // 树形结构过滤方法
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    
    // 树形节点点击事件
    handleNodeClick(data) {
      console.log('选中节点:', data)
      this.selectedNode = data
      // 根据选中的节点过滤表格数据
      this.loadTableData()
    },
    
    // 获取节点图标
    getNodeIcon(data) {
      if (data.type === 'room') {
        return 'el-icon-house'
      } else if (data.children && data.children.length > 0) {
        return 'el-icon-folder-opened'
      } else {
        return 'el-icon-folder'
      }
    },
    
    // 加载表格数据 - 使用mock数据
    loadTableData() {
      this.loading = true
      setTimeout(() => {
        const mockData = [
          {
            id: 1,
            username: 'admin',
            roomNumber: '101',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 2,
            username: 'admin',
            roomNumber: '102',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 3,
            username: 'admin',
            roomNumber: '103',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 4,
            username: 'admin',
            roomNumber: '104',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 5,
            username: 'admin',
            roomNumber: '105',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 6,
            username: 'admin',
            roomNumber: '106',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 7,
            username: 'admin',
            roomNumber: '107',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 8,
            username: 'admin',
            roomNumber: '108',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 9,
            username: 'admin',
            roomNumber: '109',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 10,
            username: 'admin',
            roomNumber: '110',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          },
          {
            id: 11,
            username: 'admin',
            roomNumber: '111',
            contactPhone: '13270889900',
            queryPassword: '*****',
            contactAddress: '北京市',
            mergeBilling: '否',
            creator: '曹志华',
            createTime: '2025-01-12 15:30:00'
          }
        ]

        let filteredData = mockData

        // 根据树节点过滤
        if (this.selectedNode && this.selectedNode.type === 'room') {
          filteredData = filteredData.filter(item => item.roomNumber === this.selectedNode.label)
        } else if (this.selectedNode && this.selectedNode.children) {
          // 如果选中楼栋或楼层，则过滤出该楼栋或楼层下的所有房间
          const roomLabels = this.getAllRoomLabels(this.selectedNode)
          filteredData = filteredData.filter(item => roomLabels.includes(item.roomNumber))
        }

        // 根据搜索关键字过滤
        if (this.searchForm.keyword) {
          const keyword = this.searchForm.keyword.toLowerCase()
          filteredData = filteredData.filter(item => 
            item.username.toLowerCase().includes(keyword) || 
            item.roomNumber.toLowerCase().includes(keyword)
          )
        }

        this.total = filteredData.length
        const start = (this.currentPage - 1) * this.pageSize
        const end = start + this.pageSize
        
        if (this.activeTab === 'tenant-info') {
          this.tableData = filteredData.slice(start, end)
        } else {
          // 租户管理数据与租户信息数据结构一致，这里直接复用
          this.managementData = filteredData.slice(start, end).map(item => ({
            ...item,
            paymentMethod: 'prepaid',
            electricPlan: 'plan1',
            timePlan: 'time1',
            waterPlan: 'water1',
            subsidyPlan: 'subsidy1',
            depositAmount: '100.00',
            feeAmount: '50.00',
            publicAmount: '10.00'
          }))
        }
        this.loading = false
      }, 500)
    },

    getAllRoomLabels(node) {
      let roomLabels = []
      if (node.type === 'room') {
        roomLabels.push(node.label)
      } else if (node.children && node.children.length > 0) {
        node.children.forEach(child => {
          roomLabels = roomLabels.concat(this.getAllRoomLabels(child))
        })
      }
      return roomLabels
    },

    // 表格样式
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        backgroundColor: '#f2f2f2',
        color: '#333',
        fontWeight: 'bold',
        textAlign: 'center'
      }
    },
    rowStyle({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return { backgroundColor: '#f9f9f9' }
      } else {
        return { backgroundColor: '#ffffff' }
      }
    },
    // 搜索
    handleSearch() {
      this.currentPage = 1
      this.loadTableData()
    },
    resetSearch() {
      this.searchForm.keyword = ''
      this.currentPage = 1
      this.loadTableData()
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.loadTableData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadTableData()
    },
    // Tab切换
    handleTabClick(tab) {
      console.log('切换到:', tab.name)
    },
    // 密码显示/隐藏
    togglePassword(row) {
      // 实际项目中，这里应该有更安全的密码处理方式
      // 比如从后端获取明文密码，或者前端解密
      // 这里仅作演示，直接切换显示/隐藏
      if (row.queryPassword === '*****') {
        row.queryPassword = '123456' // 假设明文密码是123456
      } else {
        row.queryPassword = '*****'
      }
    },
    // 新增租户
    addTenant() {
      this.dialogTitle = '新增租户'
      this.showAddDialog = true
      this.resetForm()
    },
    // 编辑租户
    editTenant(row) {
      this.dialogTitle = '编辑租户'
      this.showAddDialog = true
      this.form = { ...row } // 复制行数据到表单
      // 假设区域数据也需要加载
      this.areaData = [
        { roomNumber: '101', billingMethod: '1.2', electricWaterRatio: '1.0', meterType: '电表' },
        { roomNumber: '102', billingMethod: '1.0', electricWaterRatio: '1.0', meterType: '水表' }
      ]
      this.showAreaTable = true
    },
    // 删除租户
    deleteTenant(row) {
      this.$confirm(`确认删除用户 ${row.username} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功!')
        this.loadTableData() // 刷新数据
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 编辑租户管理
    editManagement(row) {
      this.$message.info(`编辑租户管理: ${row.username}`)
      // 实际业务逻辑
    },
    // 删除租户管理
    deleteManagement(row) {
      this.$confirm(`确认删除租户管理 ${row.username} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功!')
        this.loadTableData() // 刷新数据
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 保存手机号（示例）
    savePhone() {
      this.$message.success('手机号保存成功！')
    },
    // 选择区域（示例）
    selectArea() {
      this.showAreaTable = !this.showAreaTable
      if (this.showAreaTable && this.areaData.length === 0) {
        this.areaData = [
          { roomNumber: '101', billingMethod: '1.2', electricWaterRatio: '1.0', meterType: '电表' },
          { roomNumber: '102', billingMethod: '1.0', electricWaterRatio: '1.0', meterType: '水表' }
        ]
      }
    },
    // 移除区域
    removeArea(index) {
      this.areaData.splice(index, 1)
      this.$message.success('区域移除成功！')
    },
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.saving = true
          setTimeout(() => {
            this.$message.success(this.form.id ? '更新成功！' : '新增成功！')
            this.saving = false
            this.showAddDialog = false
            this.loadTableData() // 刷新数据
          }, 1500)
        } else {
          this.$message.error('请检查表单项！')
          return false
        }
      })
    },
    // 重置表单
    resetForm() {
      this.form = {
        id: null,
        username: '',
        queryPassword: '',
        contactPhone: '',
        contactAddress: '',
        remark: '',
        mergeBilling: '否',
        area: []
      }
      this.showAreaTable = false
      this.areaData = []
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    }
  }
}
</script>

<style scoped>
/* 主容器样式 */
.account-management {
  display: flex;
  height: calc(100vh - 120px); /* 减去头部和底部的高度 */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 左侧树形结构面板 */
.left-tree-panel {
  width: 300px;
  background: white;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 24px 0 24px 24px;
}

.tree-header {
  padding: 20px 20px 0;
  border-bottom: 1px solid #e9ecef;
}

.tree-header h4 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-header h4 i {
  color: #3498db;
  font-size: 18px;
}

.tree-search {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.tree-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.custom-tree {
  background: transparent;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

.tree-node-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-node-icon {
  color: #3498db;
  font-size: 16px;
}

/* 右侧内容面板 */
.right-content-panel {
  flex: 1;
  background: white;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 24px 24px 24px 0;
  padding: 24px;
  overflow: hidden;
}

/* 操作栏 */
.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.operation-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selected-info {
  font-size: 14px;
  color: #606266;
}

.operation-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tab切换 */
.tab-container {
  margin-bottom: 20px;
}

.custom-tabs .el-tabs__header {
  margin-bottom: 0;
}

.custom-tabs .el-tabs__nav-wrap::after {
  height: 0;
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

/* 表格容器 */
.table-container {
  flex: none;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.table-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 表格容器 */
.table-container {
  flex: none;
  display: flex;
  flex-direction: column;
}

.custom-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* mt-4 样式 */
.mt-4 {
  margin-top: 0;
  flex-shrink: 0;
}

/* 统一蓝色表格行背景 */
.custom-table >>> .el-table__body tr {
  background-color: #ffffff !important;
}

.custom-table >>> .el-table__body tr:hover {
  background-color: #f5f7fa !important;
}

.custom-table >>> .el-table__body tr td {
  color: #303133 !important;
}

/* 操作按钮组 */
.action-buttons {
  display: flex;
  gap: 5px; /* 按钮之间的间距 */
  justify-content: center; /* 居中显示 */
}

/* 密码显示 */
.password-mask {
  font-family: 'Arial', sans-serif; /* 使用等宽字体，使星号对齐 */
  letter-spacing: 2px; /* 增加字符间距 */
}

.password-icon {
  cursor: pointer;
  margin-left: 5px;
  color: #409eff;
}

/* 分页 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 弹窗样式 */
.custom-dialog .el-dialog {
  background-color: #ffffff !important;
}

.custom-dialog .el-dialog__header {
  background-color: #ffffff;
  border-bottom: 1px solid #ebeef5;
  padding: 20px;
}

.custom-dialog .el-dialog__body {
  background-color: #ffffff;
}

.custom-dialog .el-dialog__wrapper {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.custom-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.dialog-content {
  padding: 20px;
}

.dialog-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.dialog-header h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dialog-header h3 i {
  color: #67c23a;
}

.custom-form .el-form-item {
  margin-bottom: 20px;
}

.custom-radio-group {
  display: flex;
  gap: 20px;
  align-items: center;
}

.custom-radio .el-radio__label {
  font-size: 14px;
}

.select-area-btn {
  width: 100%;
}

.area-table-container {
  margin-top: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}

.area-table-header {
  background-color: #f5f7fa;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.area-table-header h4 {
  margin: 0;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.area-table-header h4 i {
  color: #e6a23c;
}

.area-table {
  width: 100%;
}

.dialog-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .account-management {
    flex-direction: column;
    height: auto;
  }

  .left-tree-panel {
    width: auto;
    margin: 10px;
    border-radius: 12px;
  }

  .right-content-panel {
    margin: 10px;
    border-radius: 12px;
    padding: 15px;
  }

  .operation-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .operation-right {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .operation-right .el-input {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .operation-right .el-button {
    width: 100%;
  }

  .el-col-12 {
    width: 100%;
  }
}
</style>


